import React, {Component} from 'react';
import {Carousel} from 'antd-mobile';

export default class one extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: this.props.match.params.id,
            data: {},
            img: ['1', '2', '3'],
            imgHeight: 176,
        };
    }

    componentDidMount() {
        this.setState({
            data: {
                hose_name: '龙城半山公馆',
                startTime: '2018-12-30',
                price: '36100',
                address: '东北旺23号公路23号',
                developer: '恒大地产',
                propertyCompany: '恒大地产',
                PropertyMoney: '暂无资料',
                propertyType: '暂无资料',
                propertyYear: '70',
                buildingType: '暂无资料',
                buildingAcreage: '暂无资料',
                landAcreage: '暂无资料',
                ParkingSpace: '暂无资料',
                PlannedHouseholds: '暂无资料',
                certificateNumber: '有'
            }
        })
        setTimeout(() => {
            this.setState({
                img: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
            });
        }, 100);
        console.log(this.props.match.params.id)
    }

    render() {
        let data = this.state.data;
        return (
            <div className='details'>
                <div className="details_top">
                    <Carousel
                        autoplay={true}
                        infinite
                        dots={false}
                        autoplayInterval={2000}
                        //获取切换轮播图的下标
                        // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                        afterChange={index => console.log('slide to', index)}
                    >
                        {this.state.img.map(val => (
                            <a
                                key={val}
                                //可以设置图片跳转地址
                                href="http://www.alipay.com"
                                style={{display: 'inline-block', width: '100%', height: this.state.imgHeight}}
                            >
                                <img
                                    src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>


                </div>
                <div className="details_center white">
                    <ul>
                        <li>{data.hose_name}</li>
                        <li>均价&nbsp;{data.price}元/m²</li>
                        <li>开盘时间 :  &nbsp;{data.price}</li>
                        <li>地址 :  &nbsp;{data.address}</li>
                        <li>开发商 :  &nbsp;{data.developer}</li>
                        <li>物业公司 :  &nbsp;{data.propertyCompany}</li>
                        <li>
                            <div>物业费 :  &nbsp;{data.PropertyMoney}</div>
                            <div>物业类型 :  &nbsp;{data.propertyType}</div>

                        </li>
                        <li>
                            <div>产权年限 :  &nbsp;{data.propertyYear}</div>
                            <div>建筑类型 :  &nbsp;{data.buildingType}</div>
                        </li>
                        <li>
                            <div>占地面积 :  &nbsp;{data.landAcreage}</div>
                            <div>建筑面积 :  &nbsp;{data.buildingAcreage}</div>
                        </li>
                        <li>车位情况 :  &nbsp;{data.ParkingSpace}</li>
                        <li>计划户数 :  &nbsp;{data.PlannedHouseholds}</li>
                        <li>预售证号 :  &nbsp;{data.certificateNumber}</li>
                    </ul>
                </div>

                <div className="details_bottom white">
                    <div className='details_bottom_top'>
                        <div>
                            <p>
                                <svg style={{width: '100%', height: '90%'}} t="1626956193362" className="icon"
                                     viewBox="0 0 1228 1024" version="1.1"
                                     xmlns="http://www.w3.org/2000/svg" p-id="3917" width="200" height="200">
                                    <path
                                        d="M614.4 998.058667C439.637333 998.058667 65.7408 617.403733 65.7408 358.058667A293.410133 293.410133 0 0 1 358.741333 64.989867c95.095467 0 184.046933 38.775467 253.610667 93.457066C686.08 103.765333 774.9632 64.853333 870.058667 64.853333a293.410133 293.410133 0 0 1 293.0688 293.137067c0 259.413333-373.9648 640-548.727467 640zM358.741333 139.946667a218.3168 218.3168 0 0 0-218.043733 218.112C140.629333 577.672533 489.2672 922.965333 614.4 922.965333c125.1328 0 473.770667-345.361067 473.770667-564.974933a218.3168 218.3168 0 0 0-218.112-218.112c-54.818133 0-109.704533 17.2032-161.928534 46.011733-18.432 10.103467-35.157333 21.026133-49.9712 31.880534a288.290133 288.290133 0 0 0-18.773333 14.882133 37.546667 37.546667 0 0 1-50.176-0.136533C550.570667 193.877333 452.334933 139.946667 358.741333 139.946667z"
                                        fill="#717171" p-id="3918"></path>
                                </svg>
                                {/*<img style={{width: '100%', height: '100%'}}*/}
                                {/*     src="https://img1.baidu.com/it/u=610017077,4160995221&fm=11&fmt=auto&gp=0.jpg" alt=""/>*/}
                            </p>
                            <p>关注</p></div>
                        <div>
                            <p>
                                <svg style={{width: '100%', height: '90%'}} t="1626956014319" className="icon"
                                     viewBox="0 0 1024 1024" version="1.1"
                                     xmlns="http://www.w3.org/2000/svg" p-id="2974" width="200" height="200">
                                    <path
                                        d="M513.5 14C788.262 14 1011 221.516 1011 477.5S788.262 941 513.5 941c-47.829 0-94.081-6.288-137.857-18.025L212.872 1010.87c-17.494 9.448-39.335 2.925-48.783-14.57a36 36 0 0 1-4.15-13.575l-19.582-198.659C62.961 702.361 16 595.04 16 477.5 16 221.516 238.738 14 513.5 14z m0 65C273.649 79 81 258.483 81 477.5c0 96.55 37.37 187.794 104.503 259.693l2.044 2.172a65 65 0 0 1 17.423 37.62l0.074 0.705 15.304 155.271 124.41-67.18a65 65 0 0 1 47.04-5.767l0.678 0.178C431.43 870.637 472.044 876 513.5 876 753.351 876 946 696.517 946 477.5S753.351 79 513.5 79z"
                                        fill="#db4117" p-id="2975"></path>
                                    <path d="M280 478m-75 0a75 75 0 1 0 150 0 75 75 0 1 0-150 0Z" fill="#db4117"
                                          p-id="2976"></path>
                                    <path d="M514 478m-75 0a75 75 0 1 0 150 0 75 75 0 1 0-150 0Z" fill="#db4117"
                                          p-id="2977"></path>
                                    <path d="M747 478m-75 0a75 75 0 1 0 150 0 75 75 0 1 0-150 0Z" fill="#db4117"
                                          p-id="2978"></path>
                                </svg>
                            </p>
                            <p>咨询</p></div>
                    </div>
                    <div className='details_bottom_bottom'>
                        <div className='details_bottom_bottom_one'>地图导航</div>
                        <div className='details_bottom_bottom_two'>预约看房</div>
                    </div>
                </div>
            </div>

        )
    }
}
